<template>
  <a-modal width="60%" v-model="modal2Visible" title="新增设备" centered @ok="congif">
    <a-form :form="form">
      <a-row>
        <a-col :span="12">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="设备名称"
          >
            <a-input
              v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入设备名称' }] },
        ]"
              placeholder="请输入设备名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="设备归属地"
          >
            <a-input
              v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入设备归属地' }] },
        ]"
              placeholder="请输入设备归属地"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="设备ID"
          >
            <a-input
              v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入设备ID' }] },
        ]"
              placeholder="请输入设备ID"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="设备位置"
          >
            <a-input
              v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入设备位置' }] },
        ]"
              placeholder="请输入设备位置"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="设备版本"
          >
            <a-input
              v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入设备版本' }] },
        ]"
              placeholder="请输入设备版本"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
        <a-button type="primary" @click="check">Check</a-button>
      </a-form-item>-->
    </a-form>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 }
}
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 }
}
export default {
  data() {
    return {
      modal2Visible: false,
      checkNick: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' })
    }
  },
  methods: {
    congif() {
       this.form.validateFields(err => {
        if (!err) {
          console.info('success')
        }
      })
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible
    },
    check() {
      this.form.validateFields(err => {
        if (!err) {
          console.info('success')
        }
      })
    },
    handleChange(e) {
      this.checkNick = e.target.checked
      this.$nextTick(() => {
        this.form.validateFields(['nickname'], { force: true })
      })
    }
  }
}
</script>